var wrapper = document.getElementById('wrapper');
var header = document.getElementById('header');
var tabList = header.getElementsByTagName('li');
var divList = wrapper.getElementsByTagName('div');


// 1. 自定义属性方式解决问题
for (var i = 0; i < tabList.length; i++) {
  // 在点击事件触发时，i已经变成了它tabList.length，但是再循环的过程中第几轮循环i就是几，所以我们应该把i存起来。存在哪里呢？因为每个li都是一个元素对象，而我们说对象可以添加属性存储信息，存在每个li元素身上；
  tabList[i].myIndex = i;
  // i = 0时 tabList[i] 代表第一个li元素，所以给它记录一下自己的索引 0
  // i = 1时 tabList[i] 代表第二个li元素，它记录自己的索引 1
  // i = 2时 tabList[i] 代表第三个li元素，它记录自己的索引 2
  tabList[i].onclick = function () {
    for (var j = 0; j < tabList.length; j++) {
      tabList[j].className = '';
      divList[j].className = '';
    }
    // 上面我们记录了每个li的索引，在这里需要取出来？这里有一个关键点，就是我们点击的哪一个，然后就取哪一个的myIndex属性
    // 在事件函数中，this代表本次触发事件的元素对象
    var myIndex = this.myIndex;
    tabList[myIndex].className = 'active';
    divList[myIndex].className = 'active';
  }
}